<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 2em"
    >
      <el-breadcrumb-item :to="{ path: '/admin.html' }"
        >管理首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>其他管理</el-breadcrumb-item>
      <el-breadcrumb-item>学校管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input
          placeholder="搜索县区、学校名称"
          v-model="searchForm.schoolName"
          @keyup.enter.native="doSearchForm"
          style="width: 25rem"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="doSearchForm()"
          >查询</el-button
        >
      </el-form-item>

      <el-form-item>
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="add.dialogVisible = true"
          >增加</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%" v-model="tableData">
      <el-table-column
        prop="countiesName"
        label="区县"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="schoolName"
        label="学校名称"
        width="250"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="schoolGrade"
        label="小学/初中"
        width="250"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.schoolGrade == 1 ? "小学" : "中学" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="schoolRange"
        label="学区范围"
        width="450"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="userId" label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="info" @click="doUpdate(scope.row)" size="small"
            >修改</el-button
          >
          <el-button type="danger" @click="doDelete(scope.row)" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 增加 -->
    <el-dialog title="新增" :visible.sync="add.dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="县区">
          <el-select v-model="add.form.countiesId" placeholder="请选择">
            <el-option
              v-for="item in roleData"
              :key="item.countiesId"
              :label="item.countiesName"
              :value="item.countiesId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学校名称">
          <el-input v-model="add.form.schoolName"></el-input>
        </el-form-item>
        <el-form-item label="小学/中学：">
          <el-radio-group v-model="add.form.schoolGrade">
    <el-radio :label="1">小学</el-radio>
    <el-radio :label="2">中学</el-radio>
  </el-radio-group>
        </el-form-item>
        <el-form-item label="学区范围">
          <el-input v-model="add.form.schoolRange"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="add.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAdd()">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改-->
    <el-dialog title="修改" :visible.sync="update.dialogVisible" width="30%">
      <el-form ref="form" label-width="80px">
        <el-form-item label="县区">
          <el-select v-model="update.form.countiesId" placeholder="请选择">
            <el-option
              v-for="item in roleData"
              :key="item.countiesId"
              :label="item.countiesName"
              :value="item.countiesId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学校名称">
          <el-input v-model="update.form.schoolName"></el-input>
        </el-form-item>
        <el-form-item label="小学/中学">
         <el-radio-group v-model="update.form.schoolGrade">
    <el-radio :label="1">小学</el-radio>
    <el-radio :label="2">中学</el-radio>
  </el-radio-group>
        </el-form-item>
        <el-form-item label="学区范围">
          <el-input v-model="update.form.schoolRange"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="update.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doUpdateFrom()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
  </div>
</template>

<script>
import school from "/src/api/school";
import counties from "/src/api/counties";

export default {
  data() {
    return {
      value: "",
      roleData: [],
      tableData: [],
      searchForm: {
        schoolName: "",
        countiesName: "",
      },
      form: {
        schoolName: "",
        countiesName: "",
      },
      add: {
        dialogVisible: false,
        form: {
          countiesId: 1,
          schoolName: "",
          schoolGrade: 1,
          schoolRange: "",
        },
      },
      update: {
        dialogVisible: false,
        form: {},
      },

      total: 0,
    };
  },
  mounted() {
    this.search();
    this.roleSearch();
  },
  methods: {
    //分页查询
    search() {
      school
        .page(this.form)
        .then((r) => {
          console.info(r);
          this.tableData = r.data.data.data;
          this.total = r.data.data.total;
          this.from.current = r.data.data.current;
        })
        .catch((error) => {
          console.warn(error);
        });
    },
    // 模糊查询
    doSearchForm() {
      this.searchForm.countiesName = this.searchForm.schoolName;
      this.form = { ...this.form, ...this.searchForm };
      this.search();
    },

    //增加
    doAdd() {
      school.add(this.add.form).then((r) => {
        // console.info(this.roleData);
        if (r.data.ok) {
          this.$message.success("添加成功");
          this.search();
          this.add.form = {
            countiesId: 1,
            schoolName: "",
            schoolGrade: 1,
            schoolRange: "",
          };
          this.add.dialogVisible = false;
        }
      });
    },
    doDelete(row) {
      this.$confirm(`确定删除！`).then(() => {
        school.del(row.schoolId).then((r) => {
          if (r.data.ok) {
            this.$message.success("删除成功");
            this.search();
          }
        });
      });
    },
    //修改
    doUpdate(row) {
      this.update.form = { ...row };
      this.update.dialogVisible = true;
    },
    doUpdateFrom() {
      school.updateKey(this.update.form).then((r) => {
        if (r.data.ok) {
          this.$message.success("修改成功");
          this.search();
          this.update.dialogVisible = false;
        }
      });
    },
    roleSearch() {
      counties.selectsAll().then((r) => {
        this.roleData = r.data.data;
      });
    },

    //end
  },
};
</script>

<style scoped>
.demo-form-inline {
  margin-left: 19rem;
}
.demo-form-inline > :nth-child(2) {
  margin-right: 25rem;
}
</style>